<template>
    <view class="home">
        <!-- 导航栏 -->
        <uni-nav-bar class="uni-navbar" fontSize="60" color="#000" title="车型参数" backgroundColor="#fff" :shadow="false"
            :border="false">
            <block slot="left">
                <uni-icons @click="goback" color="#111111" type="left" size="24"></uni-icons>
            </block>
        </uni-nav-bar>
        <view class="content">
            <view class="model-top">
                <view class="model-title">
                    <view class="big-title">Panamera</view>
                    <view class="small-title">大型车</view>
                </view>
                <view class="desc uni-ellipsis-1">2024款 Panamera2.9T 双涡轮增压国VI </view>
                <view class="parame-price">
                    <view class="left">
                        <view class="price-number">12.34</view>
                        <view class="price-text">万起</view>
                    </view>
                    <view class="right" @click="favClick">
                        <view class="fav" v-if="!favCheck">
                            <uni-icons type="star" size="30"></uni-icons>
                            <view class="text">收藏</view>
                        </view>
                        <view class="fav" v-else>
                            <uni-icons color="#FF5F00" type="star-filled" size="30"></uni-icons>
                            <view class="text">已收藏</view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 品牌列表 -->
            <view class="list-tabs mt30">
                <y-tabs v-model="activeIndex" swipeable sticky :offsetTop="offsetTop" @slide-change="slideChange"
                    @slide-end="slideEnd">
                    <y-tab class="y-tab-virtual" v-for="(title, index) in tabs" :title="title" :key="index">
                        <!-- 内容页滑动时锁住scroll-view的竖向滚动 -->
                        <scroll-view class="scroll-wrap" :scroll-y="locked && activeIndex === index ? false : true">
                            <parameter-list :activeIndex="index" />
                        </scroll-view>
                    </y-tab>
                </y-tabs>
            </view>
        </view>
        <!-- 底部联系按钮 -->
        <contact-btn ref="contactBtn"></contact-btn>
        <!-- 弹窗 -->
        <contact-popup ref="contactPopup"></contact-popup>
    </view>
</template>

<script>
import parameterList from '@/components/parameter-list';
import contactPopup from "@/components/contact-popup.vue"
import contactBtn from "@/components/contact-btn.vue"
export default {
    // shared:表示页面 wxss 样式将影响到自定义组件
    options: {
        styleIsolation: 'shared'
    },
    components: {
        parameterList,
        contactPopup,
        contactBtn
    },
    data() {
        return {
            tabs: ['技术参数', '内/外舒适', '座椅', '影音信息', '安全参数'],
            activeIndex: 0, // 标签页当前选择项的下标
            offsetTop: 0, //粘性定位布局下与顶部的最小距离
            locked: false,
            favCheck: false
        }
    },
    created() {
        // #ifdef H5
        this.offsetTop = 43;
        this.offsetTop = 0;
        // #endif
    },
    onLoad() {
    },
    methods: {
        handLocation() { },
        clickBannerItem(item) {
            console.info(item)
        },
        changeSwiper(e) {
            this.current = e.detail.current
        },
        goToDetail(index) {
            // 跳转到详情页的代码
            // 可以使用uni.navigateTo或uni.redirectTo等API实现页面跳转
        },
        // 内容滑动中触发
        slideChange() {
            this.locked = true
        },
        // 内容页滑动结束时触发
        slideEnd() {
            this.locked = false
        },
        goback() {
            uni.navigateBack({ delta: 1 });
            // uni.switchTab({
            //     url: '/pages/home/index'
            // })
        },
        handleBigButtonClick(type) {
            this.$refs.contactPopup.$refs.popup.open(type)
        },
        // 收藏
        favClick() {
            this.favCheck = !this.favCheck
        }

    }
}
</script>

<style lang="scss" scoped>
page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: #fff;
    min-height: 100%;
    height: auto;
    background-size: cover;
    background-position: center;
    // padding: 32rpx 32rpx;
}

.brand-logo {
    height: 300rpx;
    text-align: center;

    .logo-img {
        width: 100%;
        height: 300rpx;
    }
}
</style>
